<template>
	<view class="page" :style="{'background-image':`url(${config.bjimg})`}">
		<view class="row j-centert">
			<image :src="config.img" mode="widthFix" class="logo"></image>
			<view class="form-box">

				<view class="title">
					{{config.tite}}
				</view>
				<view class="item flex-box">
					<input type="text" v-model="username" :adjust-position="false" class="flex" placeholder="请输入管理账号"
						placeholder-class="pla" />
				</view>
				<view class="item flex-box">
					<input type="password" v-model="password" :adjust-position="false" class="flex"
						placeholder="请输入管理密码" placeholder-class="pla" />
				</view>
				<view class="btn" @click="login">登录</view>
			</view>
		</view>
		<contact color="#fff" :isClick="false"></contact>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				config: '',
			};
		},
		onLoad() {
			// #ifdef H5
			this.$common.H5HideShare()
			// #endif
			this.getPageConfig();
		},
		methods: {
			getPageConfig() {
				this.$http.get({
					url: '/singleSaleManageApi/getPageConfig',
				}).then(res => {
					if (res.code != 200) return this.$Toast(res.msg);
					const result = res.data;
					this.config = result;
					if (result.tite) this.$BarTitle(result.tite)
				})
			},
			login() {
				if (!this.username.trim()) {
					uni.showToast({
						title: '请输入管理账号',
						icon: 'none'
					})
					return
				}
				if (!this.password.trim()) {
					uni.showToast({
						title: '请输入管理密码',
						icon: 'none'
					})
					return
				}
				this.$http.post({
					url: '/singleSaleManageApi/manageLogin',
					data: {
						uname: this.username,
						upass: this.password,

					}
				}).then(res => {
					if (res.code == 200) {
						uni.setStorageSync('uid', res.data.uid)
						uni.reLaunch({
							url: '/pages/login/code?uname=' + this.username + '&upass=' + this.password +
								'&uid=' + res.data.uid + '&tel=' + res.data.tel
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.page {
		width: 100vw;
		height: 100vh;
		background-size: cover;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;

		.logo {
			width: 100%;
		}

		.form-box {
			width: 600rpx;
			position: relative;
			z-index: 3;



			.title {
				text-align: center;
				margin-top: 30rpx;
				font-size: 28rpx;
			}

			.item {
				height: 88rpx;
				border-radius: 88rpx;
				line-height: 88rpx;
				background: #F5F5F5;
				margin-top: 40rpx;

				input {
					height: 100%;
					padding: 0 30rpx;
				}
			}

			.btn {
				height: 88rpx;
				border-radius: 88rpx;
				line-height: 88rpx;
				color: $fff;
				margin-top: 80rpx;
				font-size: $font-size-lg;
				background: #FF784A linear-gradient(157deg, rgba(255, 255, 255, 0.37) 0%, rgba(255, 255, 255, 0) 100%);
				text-align: center;
			}
		}
	}
</style>